<template>
<transition name="remark">
  <div class="wrap" v-show="isShow">
    <aside class="back" @click="back">back</aside>

    <v-header :seller="seller" class="fixed"></v-header>
    <section class="wrapper" ref="foodList">
         <ul class="list_content" >
          <li class="food_list" v-for="(food ,index) in selectFoods" :key="index">
            <aside class="food_icon">
              <img :src="food.icon" alt="">
            </aside>

            <aside class="text_content">
              <span class="name">{{food.name}}</span>
              <aside class="option_list">
              <span class="option" v-for = "(item,index) in food.options_text" :key="index">{{item}}</span>
              </aside>
            </aside>
            <div class="count"><span>X{{ food.qty }}</span></div>
            <div class="price"><span>${{food.price * 100 * food.qty/100}}</span></div>
          </li>
        </ul>
    </section>
 
    <section class="checkout">
       <aside class="price">
         <span>${{totalPrice}}</span>
       </aside>
       <aside class="confirm">
         checkout
       </aside>
    </section>
    </div>

  </div>
</transition>
</template>
<script type="text/ecmascript-6">
import BScroll from "better-scroll";
import header from "../header/header.vue";

//  const ERR_OK = 0;
export default {
  props: {
    seller: {
      type: Object
    },
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      curIndex: 0,
      test: "选项1",
      optionIndex: [],
      input: ""
    };
  },
  created() {},
  mounted() {},
  computed: {
    selectFoods() {
      return this.$store.getters.selectedFoods;
    },
    totalPrice() {
      let total = 0;
      this.selectFoods.forEach(food => {
        total += food.price * 100 * food.qty;
      });
      return total / 100;
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        this.$nextTick(() => {
          //$refs绑定元素
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.foodList, {
              //开启点击事件 默认为false
              click: true
            });
            // console.log(this.scroll)
          } else if (!this.$refs.foodList) {
            return;
          } else {
            this.scroll.refresh();
          }
        });
      }
    }
  },
  methods: {
    back() {
      this.$store.commit("setShow", { target: "order", status: false });
    },
    confirm() {}
  },
  components: {
    vHeader: header
  }
};
</script>

<style lang="less" scoped rel="stylesheet/stylus">
.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: white;

  & * {
    box-sizing: border-box;
  }
}
.fixed {
  width: 100%;
  position: fixed !important;
}

.back {
  position: fixed;
  top: 0.2rem;
  right: 0.3rem;
  padding: 0.3rem 0.3rem;
  box-shadow: 0 0 0.06rem #ccc;
  border-radius: 0.1rem;
  color: white;
  z-index: 999;
}

.wrapper{
  margin: 2.2rem auto;
  width: 100%;
  overflow: hidden;
}
.list_content {
  height: 100%;
  padding: 0 0.3rem;
  // overflow: hidden;
  .food_list {
    width: 100%;
    height: 1rem;
    margin-bottom: 0.3rem;
    box-shadow: 0 0.02rem 0.03rem #ccc;
    padding-right: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.1rem;
    overflow: hidden;
    .text_content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 0.1rem;
      height: 100%;
      .name {
        display: block;
      }
      .option_list {
        .option {
          font-size: 0.03rem;
          padding: 0.05rem 0.1rem;
          border-radius: 0.1rem;
          margin-right: 0.1rem;
          box-shadow: 0 0 1px #ccc;
        }
      }
    }
    .food_icon {
      width: 1rem;
      height: 1rem;
      border-radius: 0.02rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .count {
      text-align: left;
      width: 0.5rem;
    }
    .price {
      width: 1.5rem;
      text-align: right;
    }
  }
}

@height: 1.3rem;
.checkout {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  height: @height;
  box-shadow: 0 -3px 3px #cccccc;
  .price {
    padding: 0 0.5rem;
    line-height: @height;
    color: white;
    flex: 1;
    background: #141d27;
    span {
      font-size: 0.35rem;
    }
  }
  .confirm {
    text-align: center;
    width: 2.5rem;
    height: @height;
    line-height: @height;
    background: #00b43c;
    font-size: 0.35rem;
    color: white;
  }
}

.remark-enter-active,
.remark-leave-active {
  transition: all 0.5s;
}
.remark-enter,
.remark-leave-active {
  transform: translate3d(0, 100%, 0) scale(0.2);
}
</style>